/* eslint-disable indent */
import * as echarts from 'echarts';
import { LineEcharts, PieEcharts } from './echarts';
import { deepClone, toThousands } from './constant';

const attckFormater = (itemList, param) => {
  const copylist = [];
  for (let i = 0; i < itemList.length / 2; i++) {
    copylist.push(itemList.slice(i * 2, i * 2 + 2));
  }
  const content = copylist.reduce((html, item) => {
    return (html += `
      <tr style="width:258px;white-space: nowrap;">
        <td>${item[0].name}</td>
        <td style="display:inline-block;margin-right:5px;margin-left:5px;">${toThousands(
          item[0].value
        )}</td>
        <td>${item[1] ? item[1].name : ''}</td>
        <td style="display:inline-block;margin-left:10px">${
          item[1] ? toThousands(item[1].value) : ''
        }</td>
      </tr>

    `);
  }, '');
  const ht = `<div style="min-width: 265px; white-space: normal; color: #696c78;">
    <div style="display: flex; justify-content: space-between; padding-bottom: 15px;">
      <span>${param[0].name}</span>
      <span>总数：${toThousands(param[0].value)}</span>
    </div>
    <table style="width:100%">
      ${content}
    </table>
  </div>`;
  return ht;
};

const interFormater = (itemList, param) => {
  let cont1 = '';
  let cont2 = '';
  itemList.forEach((item) => {
    if (item.name.includes('rx')) {
      cont1 += `
        <div style="height: 25px">
          <span style="float: left;">${item.name.substr(2)}</span>
          <span style="float: right;padding-left:10px">${toThousands(item.value)}</span>
        </div>
      `;
    } else {
      cont2 += `
        <div style="height: 25px">
          <span style="float: left; margin-left: 10px;">${item.name.substr(2)}</span>
          <span style="float: right; padding-left:10px;">${toThousands(item.value)}</span>
        </div>
      `;
    }
  });
  const ht = `<div style="min-width: 260px; white-space: normal; color: #696c78;">
    <div style="display: flex; justify-content: space-between; padding-bottom: 15px;">
      <span>${param[0].name}</span>
      <span>总数：${toThousands(param[0].value)}</span>
    </div>
    <div style=" min-width: 125px; display: inline-block;">
      <p>RX</p>
      ${cont1}
    </div>
    <div style="min-width: 125px; display: inline-block;">
      <p style="margin-left: 10px;">TX</p>
      ${cont2}
    </div>
  </div>`;
  return ht;
};

export function drawLine(domID, data, color, lineColor, type, istotal = false) {
  const { timeline: date, value } = data;
  const lineInfo = {
    id: domID,
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        const itemList = params[0].data.itemList || [];
        if (type === 'attack') {
          return attckFormater(itemList, params);
        } else if (type === 'interface') {
          return interFormater(itemList, params);
        } else {
          const contentHTML = itemList.reduce((html, item) => {
            return (
              html +
              `
            <p style="display: flex; justify-content: space-between;">
              <span>${item.name}</span>
              <span style="margin-left: 10px;">${toThousands(item.value)}</span>
            </p>
            `
            );
          }, '');
          if (!istotal) {
            const html = `<div style="color: #696c78;">
              <p style="padding-bottom: 15px;">${params[0].name}</p>
              ${contentHTML}
            </div>`;
            return html;
          } else {
            const html = `<div style="color: #696c78;">
              <p style="padding-bottom: 15px;">
                <span>${params[0].name}</span>
                <span>${toThousands(params[0].value)}</span>
              </p>
              ${contentHTML}
            </div>`;
            return html;
          }
        }
      },
      margin: 0,
    },
    grid: { top: '20px', right: '60px' },
    xAxis: date,
    axisPointerColor: lineColor,
    data: {
      seriesData: [
        {
          name: name,
          type: 'line',
          lineStyle: {
            normal: {
              width: 1,
              color: lineColor,
            },
          },
          areaStyle: {
            normal: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[0],
                },
                {
                  offset: 1,
                  color: color[1],
                },
              ]),
            },
          },
          symbol: 'none',
          smooth: true,
          data: value,
        },
      ],
    },
  };
  setTimeout(() => {
    new LineEcharts(lineInfo);
  }, 20);
}

export function drawPie(data, domID, customConfig) {
  const pieInfo = {
    id: domID,
    title: {
      show: false,
      textStyle: {
        fontSize: 14,
        fontFamily: 'PingFangSC',
        fontWeight: 400,
      },
    },
    tooltip: {
      formatter: function ({ data }) {
        return `
          <div>
            <span class='mr20'>${data.name}</span>
            <span>${toThousands(data.value)}</span>
          </div>
        `;
      },
    },
    legend: {
      show: false,
    },
    data: {
      seriesData: data.map((item) => {
        const defaultConfig = {
          itemStyle: { color: item.color },
          emphasis: {
            itemStyle: { color: item.color },
          },
        };
        return Object.assign(defaultConfig, item);
      }),
    },
  };
  new PieEcharts(deepClone(pieInfo, customConfig));
}
